"use client"
import React, { useState } from "react"
import { Key, Mail, RotateCw, Save, Shield } from "lucide-react"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useToast } from "@/hooks/use-toast"

const SecuritySetting = () => {
  const toast = useToast()

  // 登录安全设置
  const [loginSecurity, setLoginSecurity] = useState({
    twoFactorAuth: false,
    maxLoginAttempts: 5,
    sessionTimeout: 30
  })

  // 修改密码
  const [passwordInfo, setPasswordInfo] = useState({
    currentPassword: "",
    newPassword: "",
    confirmNewPassword: ""
  })

  // 验证方式
  const [contactInfo, setContactInfo] = useState({
    phone: "",
    email: ""
  })

  // 登录安全设置属性修改
  const handleLoginSecurityChange = (key: string, value: boolean | number | string) => {
    setLoginSecurity({
      ...loginSecurity,
      [key]: value
    })
  }

  // 保存登录安全设置
  const handleLoginSecuritySave = () => {
    console.log("🚀 ~ SecuritySetting ~ securitySettings:", loginSecurity)
  }

  const handlePasswordChange = (key: string, value: string) => {
    setPasswordInfo({
      ...passwordInfo,
      [key]: value
    })
  }

  // 保存密码
  const handleSavePassword = () => {
    if (passwordInfo.newPassword !== passwordInfo.confirmNewPassword) {
      toast.error({
        title: "两次输入的密码不一致"
      })
      return
    }

    console.log("🚀 ~ SecuritySetting ~ handleChangePassword ~ securitySettings:", {
      currentPassword: passwordInfo.currentPassword,
      newPassword: passwordInfo.newPassword
    })
  }

  const handleContactChange = (key: string, value: string) => {
    setContactInfo({
      ...contactInfo,
      [key]: value
    })
  }

  const handleSaveContact = () => {
    console.log("🚀 ~ SecuritySetting ~ handleSaveContact ~ contactInfo:", contactInfo)
  }

  return (
    <div className="space-y-6">
      {/* 安全策略 */}
      <Card className="dark:bg-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Shield className="mr-2 h-5 w-5" />
            安全策略
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h3 className="text-lg font-medium mb-4">登录安全</h3>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="two-factor" className="text-sm font-medium">
                    双因素认证
                  </Label>
                  <p className="text-sm text-gray-500 dark:text-gray-400">启用后登录时需要额外验证</p>
                </div>
                <Switch
                  id="two-factor"
                  checked={loginSecurity.twoFactorAuth}
                  onCheckedChange={(checked) => handleLoginSecurityChange("twoFactorAuth", checked)}
                />
              </div>

              <div>
                <Label htmlFor="max-attempts" className="text-sm font-medium">
                  最大登录失败次数: {loginSecurity.maxLoginAttempts}
                </Label>
                <div className="mt-2">
                  <input
                    id="max-attempts"
                    type="range"
                    min="1"
                    max="10"
                    value={loginSecurity.maxLoginAttempts}
                    className="w-full"
                    onChange={(e) => handleLoginSecurityChange("maxLoginAttempts", parseInt(e.target.value))}
                  />
                </div>
              </div>

              <div>
                <Label htmlFor="session-timeout" className="text-sm font-medium">
                  会话超时时间: {loginSecurity.sessionTimeout} 分钟
                </Label>
                <div className="mt-2">
                  <input
                    id="session-timeout"
                    type="range"
                    min="5"
                    max="120"
                    value={loginSecurity.sessionTimeout}
                    className="w-full"
                    onChange={(e) => handleLoginSecurityChange("sessionTimeout", parseInt(e.target.value))}
                  />
                </div>
              </div>
            </div>
          </div>

          <div className="pt-4">
            <Button onClick={handleLoginSecuritySave}>
              <Save className="mr-2 h-4 w-4" />
              保存安全设置
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 修改密码 */}
      <Card className="dark:bg-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Key className="mr-2 h-5 w-5" />
            修改密码
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="current-password" className="text-sm font-medium">
              当前密码
            </Label>
            <Input
              id="current-password"
              type="password"
              value={passwordInfo.currentPassword}
              onChange={(e) => handlePasswordChange("currentPassword", e.target.value)}
              className="mt-1"
            />
          </div>

          <div>
            <Label htmlFor="new-password" className="text-sm font-medium">
              新密码
            </Label>
            <Input
              id="new-password"
              type="password"
              value={passwordInfo.newPassword}
              onChange={(e) => handlePasswordChange("newPassword", e.target.value)}
              className="mt-1"
            />
          </div>

          <div>
            <Label htmlFor="confirm-password" className="text-sm font-medium">
              确认新密码
            </Label>
            <Input
              id="confirm-password"
              type="password"
              value={passwordInfo.confirmNewPassword}
              onChange={(e) => handlePasswordChange("confirmNewPassword", e.target.value)}
              className="mt-1"
            />
          </div>

          <div className="pt-2">
            <Button
              disabled={!passwordInfo.currentPassword || !passwordInfo.newPassword || !passwordInfo.confirmNewPassword}
              onClick={handleSavePassword}
            >
              <RotateCw className="mr-2 h-4 w-4" />
              修改密码
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 身份验证方式 */}
      <Card className="dark:bg-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Mail className="mr-2 h-5 w-5" />
            身份验证方式
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="phone" className="text-sm font-medium">
              手机号码
            </Label>
            <div className="flex items-center mt-1">
              <Input
                id="phone"
                value={contactInfo.phone}
                onChange={(e) => handleContactChange("phone", e.target.value)}
                className="flex-1"
              />
              <Button variant="outline" className="ml-2" disabled={!contactInfo.phone}>
                验证
              </Button>
            </div>
          </div>

          <div>
            <Label htmlFor="email" className="text-sm font-medium">
              邮箱地址
            </Label>
            <div className="flex items-center mt-1">
              <Input
                id="email"
                value={contactInfo.email}
                onChange={(e) => handleContactChange("email", e.target.value)}
                className="flex-1"
              />
              <Button variant="outline" className="ml-2" disabled={!contactInfo.email}>
                验证
              </Button>
            </div>
          </div>

          <div className="pt-2">
            <Button disabled={!contactInfo.phone || !contactInfo.email} onClick={handleSaveContact}>
              <Save className="mr-2 h-4 w-4" />
              保存验证方式
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default SecuritySetting
